@import '@sealos/shadcn-ui/shadcn.css';
@import '@sealos/shadcn-ui/styles.css';

/* New designs uses white color for background. It's different from the default theme in shadcn-ui package (previously used by DevBox). */
:root {
  --background: #ffffff;
  --alert-bg: #ffffff;
}

body {
  height: 100vh;
  width: 100vw;
}

iframe {
  border: none;
}

#__next {
  height: 100%;
}

::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  border-radius: 3px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background: #c9c8c8;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover {
  background: #999;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

/* Hide spin button in inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type='number'] {
  -moz-appearance: textfield; /* Firefox */
}

div.rdp {
  --rdp-cell-size: 40px;
  --rdp-accent-color: black;
  --rdp-background-color: #f4f6f8;
  /* Switch to dark colors for dark themes */
  /* --rdp-accent-color-dark: #3003e1; */
  /* --rdp-background-color-dark: #180270; */
  /* Outline border for focused elements */
  --rdp-outline: 2px solid var(--rdp-accent-color);
  /* Outline border for focused and selected elements */
  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);
}
